<template>
  <div class="pro-content">
    <Breadcrumb class="current-bar">
      <BreadcrumbItem to="/">
        <Icon type="ios-home-outline"></Icon>
        Home
      </BreadcrumbItem>
      <BreadcrumbItem to="/components/breadcrumb">
        <Icon type="social-buffer-outline"></Icon>
        Components
      </BreadcrumbItem>
      <BreadcrumbItem>
        <Icon type="pound"></Icon>
        Breadcrumb
      </BreadcrumbItem>
    </Breadcrumb>

    <div class="pro-list">
      <ul class="pro-list-wrap">
        <li class="pro-item" v-for="item in proList">
          <a href="#" class="link-wrap">
            <div class="pic-wrap">
              <img src="/static/images/dot.jpg" alt="..."/>
            </div>

            <div class="pro-des">
              <p class="pro-title">必不可少的标题</p>
              <p class="pro-price">￥<em>8080.00</em></p>
            </div>

            <div class="btn-wrap">
              <a href="#" class="btn go-buy">立即购买</a>
              <a href="#" class="btn join-cart">加入购物车</a>
            </div>
          </a>
        </li>
      </ul>
    </div>

    <div class="loading-more">
      <Button type="primary" :loading="loading" @click="toLoading">
        <span v-if="!loading">Click me!</span>
        <span v-else>Loading...</span>
      </Button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        loading: false,
        proList: [
          {
            p_id: 1,
            picUrl: '/static/images/dot.jpg',
            title: '必不可少的描述1',
            price: '8080.00'
          },
          {
            p_id: 2,
            picUrl: '/static/images/dot.jpg',
            title: '必不可少的描述2',
            price: '8080.00'
          },
          {
            p_id: 3,
            picUrl: '/static/images/dot.jpg',
            title: '必不可少的描述3',
            price: '8080.00'
          },
          {
            p_id: 4,
            picUrl: '/static/images/dot.jpg',
            title: '必不可少的描述4',
            price: '8080.00'
          }
        ]
      }
    },
    methods: {
      toLoading() {
        this.loading = true
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .pro-content
    position: relative
    min-height: 800px
    margin: 10px 0 0 210px
    padding-bottom: 60px
    .current-bar
      padding: 10px 0
    .loading-more
      lbposition(0, 14px)
</style>